<template>
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="我是有底线的"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
    >
        <van-cell v-for="(item,index) in hot_list" :key="index" >
            <div class="back-box">
                <div class="product-list">
                    <div class="product-item" @click="detail(item.id)">
                        <div class="img-box">
                            <img :src="item.product_image" alt="">
                            <div>-{{ ((item.price - item.discount_price)/item.price * 100).toFixed(2) }}%</div>
                        </div>
                        <div class="detail">
                            <div class="title">{{ item.product_name }}
                            </div>

                            <!--  价格信息  -->
                            <div class="price-code">
                                <div class="price">
                                    <span>${{ item.discount_price }}</span>
                                    <s>${{ item.price }}</s>
                                </div>
                                <a role="button" class="am-button" aria-disabled="false">
                                    <span>已售{{ item.sale_nums }}</span>
                                </a>
                            </div>

                            <!--  点赞信息  -->
                            <div class="star-comtent-thumb">
                                <div class="star">
                                    <span class="star9"></span>
                                    <span class="number">(29)</span>
                                </div>
                                <div class="thumb">
                                    <span class="icon-thumb"></span>
                                    <span>(98)</span>
                                </div>
                                <div class="thumb">
                                    <span class="icon-comtent"></span>
                                    <span>(3)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </van-cell>
    </van-list>
</template>

<script>
import Vue from 'vue';
import { List } from 'vant';
import { Cell, CellGroup } from 'vant';

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(List);
export default {
    props: ['hot_list'],
    data() {
        return {
            loading: false,
            finished: false,
            error: false,
        };
    },
    methods: {
        onLoad() {
            var this_ = this;
            var len = setInterval(function () {
                var num = this_.hot_list.length;
                if (num > 0){
                    this_.finished = true;
                    clearInterval(len);
                }
            },1000)
        },
        detail:function (product_id) {
            console.log(product_id)
            this.$router.push({name:'product-detail',params:{product_id:product_id}})
        }
    }
}
</script>

<style scoped>
    .van-cell{
        padding:0 !important;
    }
    .van-list{
        margin-bottom: 50px !important;
    }
    .van-cell::after{
        border: none !important;
    }
    .img-box{
        text-align: center;
        width: 90px;
        height: 90px;
        overflow: hidden;
        padding: 5px;
        border-radius: 25px;
    }
    .img-box>img{
        width: 98%;
    }
    .img-box>div{
        position: absolute;
        top: 10px;
        left: 0;
        color: #ee0a24;
        padding: 2px 5px;
        background-color: #f9c607;
        font-size: 12px;
        line-height: 12px;
    }
    .detail{
        flex: 1 1;
        padding-left: 10px;
        width: calc(100% - 100px);
    }
    .title{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #636363;
        font-size: 12px;
        font-weight: bold;
        line-height: 16px;
        width: 100%;
        height: 32px;
        overflow: hidden;
        word-wrap: break-word;
    }
    .product-list{
        padding: 0 10px;
        box-sizing: border-box;
    }
    .product-item{
        display: flex;
        background-color: #fff;
        box-shadow: 0 0 13px 5px rgba(222,220,220,.5);
        border-radius: 12px;
        padding: 10px 10px 10px 0;
        box-sizing: border-box;
        margin: 5px 2px;
        align-items: center;
        position: relative;
    }
    .price-code{
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
        align-items: flex-end;
    }
    .am-button{
        height: 20px;
        line-height: 19px;
        font-size: 12px;
        padding: 0 6px;
        box-shadow: none;
        background-color: #ff8917;
        color: #fff;
        border-radius: 20px;
    }
    .price span{
        font-size: 16px;
        line-height: 16px;
        color: #e91212;
        font-weight: 700;
    }
    .price s{
        margin-left: 5px;
        font-size: 12px;
        line-height: 16px;
        color: #9c9c9c;
    }
    .star9,.icon-thumb,.icon-comtent{
        background-image: url("/images/wap-icon.svg");
        background-position: -221px -48px;
    }
    .star-comtent-thumb{
        display: flex;
        margin-top: 5px;
        align-items: center;
        font-size: 12px;
    }
    .star{
        height: 12px;
        display: flex;
    }
    .star>span{
        display: inline-block;
        width: 65px;
        height: 12px;
        align-items: center;
    }
    .star>.number{
        width: auto;
        line-height: 12px;
        color: #d4d4d4;
    }
    .thumb{
        display: flex;
        font-size: 12px;
        color: #d4d4d4;
        line-height: 12px;
        align-items: center;
        height: 16px;
        margin-left: 2%;
    }
    .icon-thumb{
        display: inline-block;
        width: 17px;
        height: 15px;
        background-position: -728px -31px;
        margin-right: 3px;
    }
    .icon-comtent{
        display: inline-block;
        width: 19px;
        height: 16px;
        background-position: -654px -30px;
        margin-right: 3px;
    }
</style>
